<!--
 * 搜索
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-search" :class="classes" :style="styles">
        <view class="pure-search-left">
            <view class="pure-search-main">
                <!-- 图标 -->
                <view class="pure-search-icon">
                    <pure-icon :name="searchIcon"></pure-icon>
                </view>

                <!-- 主体 -->
                <view class="pure-search-content">
                    <!-- 输入框 -->
                    <input
                        class="pure-search-input"
                        type="text"
                        confirmType="search"
                        :value="modelValue"
                        :textContentType="textContentType"
                        :maxlength="maxlength"
                        :cursorSpacing="cursorSpacing"
                        :focus="focus"
                        :confirmHold="confirmHold"
                        :cursor="cursor"
                        :cursorColor="cursorColor"
                        :selectionStart="selectionStart"
                        :selectionEnd="selectionEnd"
                        :adjustPosition="adjustPosition"
                        :autoBlur="autoBlur"
                        :ignoreCompositionEvent="ignoreCompositionEvent"
                        :alwaysEmbed="alwaysEmbed"
                        :holdKeyboard="holdKeyboard"
                        :alwaysSystem="alwaysSystem"
                        :inputmode="inputmode"
                        @input="onInput"
                        @focus="onFocus"
                        @blur="onBlur"
                        @confirm="onConfirm"
                        @keyboardheightchange="onKeyboardHeightChange"
                    />

                    <!-- 占位符 -->
                    <view class="pure-search-placeholders" :class="placeholderClass" v-if="isShowPlaceholder">
                        <swiper class="pure-search-placeholders-swiper" :autoplay="autoplay" circular vertical>
                            <swiper-item class="pure-search-placeholders-item" v-for="(item, index) in placeholders" :key="index">
                                <view class="pure-search-placeholders-item-content">{{ item }}</view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>

                <!-- 功能区 -->
                <view class="pure-search-functions" v-if="$slots.functions">
                    <slot name="functions"></slot>
                </view>
            </view>

            <!-- 搜索按钮 -->
            <view class="pure-search-btn" @tap="handleSearchBtnClick" :hover-class="btnHoverClass" v-if="showBtn">{{ btnText }}</view>
        </view>

        <!-- Right -->
        <view class="pure-search-right" v-if="$slots.right">
            <slot name="right"></slot>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: ["input", "focus", "blur", "search", "keyboardHeightChange", "update:modelValue"],
        data() {
            return {
                isFocus: false,
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 焦点状态
                if (this.isFocus) {
                    classes.push("pure-search-focus");
                    classes.push(this.focusClass);
                }

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 提示文本
            placeholders() {
                const arr = [];

                // placeholder 是字符串
                if (typeof this.placeholder === "string" && this.placeholder !== "") {
                    arr.push(this.placeholder);
                }

                // placeholder 是数组
                if (Array.isArray(this.placeholder) && this.placeholder.length > 0) {
                    arr.push(...this.placeholder);
                }

                return arr;
            },

            // 是否滚动占位文本
            autoplay() {
                return this.placeholders.length >= 1;
            },

            // 是否显示占位文本
            isShowPlaceholder() {
                return this.modelValue === "" || this.modelValue === undefined || this.modelValue === null;
            },
        },
        methods: {
            // 当键盘输入时，触发input事件
            onInput(e) {
                this.$emit("input", e);
                this.updateModelValue(e.detail.value);
            },

            // 输入框聚焦时触发
            onFocus(e) {
                this.isFocus = true;
                this.$emit("focus", e);
                this.updateModelValue(e.detail.value);
            },

            // 输入框失焦时触发
            onBlur(e) {
                this.isFocus = false;
                this.$emit("blur", e);
                this.updateModelValue(e.detail.value);
            },

            // 点击完成按钮时触发
            onConfirm(e) {
                this.$emit("search", e.detail.value);
                this.updateModelValue(e.detail.value);
            },

            // 键盘高度发生变化的时候触发此事件
            onKeyboardHeightChange(e) {
                this.$emit("keyboardHeightChange", e);
            },

            // 同步更新 modelValue
            updateModelValue(value) {
                this.$emit("update:modelValue", value);
            },

            // 搜索按钮点击事件
            handleSearchBtnClick() {
                this.$emit("search", this.modelValue);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
